<template>
  <div>
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  -->
    <van-cell is-link title="头像" @click="show = true">
      <img
        :src="userInfo.avatar"
        alt=""
        style="width: 30px; height: 30px; border-radius: 50%"
      />
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="userInfo.nickname"
      @click="jumpuser(userInfo.nickname)"
    />
    <van-cell title="手机号" is-link :value="userInfo.mobile" />
    <van-cell title="性别" is-link :value="userInfo.six" @click="jumpsix" />
    <van-cell title="出生日期" is-link value="内容" />
    <van-cell
      title="所在城市"
      is-link
      :value="this.values"
      @click="data = true"
    />
    <van-cell title="学科" is-link :value="this.student" @click="jumpstudent" />
    <van-cell title="年纪" is-link value="请选择" />

    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    >
      <van-uploader :after-read="afterRead" />
    </van-action-sheet>
    <!-- 年月日 -->
    <van-datetime-picker
      v-show="data"
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @change="time"
      @confirm="times"
      @cancel="data = true"
    />
    <!-- 城市 -->
    <van-popup v-model="data" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        value-key="area_name"
        @cancel="showPicker = false"
        @change="onchange"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  lzcity,
  lzcitys,
  lzcityes,
  lzimg,
  lzuserInfo,
  lzupdate,
} from "../../utils/http";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2021, 10, 1),
      currentDate: new Date(),
      data: false,
      show: false,
      actions: [{ name: "选项一" }, { name: "从手机相册选择" }],
      userInfo: {},
      columns: [],
      id: null, //省
      ids: null, //城
      value: "", //省
      values:'',
      student: "",
    };
  },
  created() {},
  mounted() {
    this.student=this.$route.query.list
    this.getcity();
    this.getuserinfo();
  },
  methods: {
    async getuserinfo() {
      const res = await lzuserInfo();
      console.log(res);
      this.userInfo = res;
    },
    // 修改图片
    async afterRead(e) {
      let content = e.file;
      let data = new FormData();
      data.append("file", content);
      const res = await lzimg(data);
      console.log(res.path);
      console.log(this.userInfo);
      this.userInfo.avatar = res.path;
      lzupdate(res.path).then((res) => {
        console.log(res);
      });
      this.show = false;
      sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo));
    },
    //省
    async getcity() {
      const res = await lzcity();
      // console.log(res);
      this.columns = res;
    },
    //城
    async onchange(picker, value, index) {
      console.log(value);
      this.value = value.area_name;
      this.cid = value.id;
      this.id = value.id;
      const res = await lzcitys(this.id);
      this.columnes = res;
      res.forEach((item) => {
        this.ids = item.id;
      });
      this.getcityed();
    },
    //区/县
    async getcityed() {
      const res = await lzcityes(this.ids);
      console.log(res);
    },

    time(value) {
      console.log(value);
    },
    times(value) {
      console.log(value);
    },
    confirm() {
      this.values=this.value
      this.data=false
    },
    onClickLeft() {
      this.$router.push("/mine");
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    onCancel() {},
    birthdate() {},
    jumpsix() {
      this.$router.push("/six");
    },
    jumpstudent() {
      this.$router.push("/students");
    },
    jumpuser() {
      this.$router.push("/nickname");
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
</style>
